@import "./reset"; //引入消除样式，在后面页面中引入这个公共样式后不需要再次引入
@import "../utils/iconfont/iconfont.css";
@import url(http://at.alicdn.com/t/c/font_3607737_439cxbzcw0h.css);

// todo:版心样式
.wrap {
    position: relative;
    margin: 0 auto;
    width: 1250px;

    // 底部加载样式
    .loading {
        position: absolute;
        transform: translate(-50%);
        left: 50%;
        bottom: 50px;
    }

    // 底部下拉图标
    .icon-xiangshangjiantou {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        display: block;
        width: 38px;
        height: 25px;
        text-align: center;

        line-height: 25px;
        font-size: 25px;
        background-color: #cd1414;
        color: #fff;
    }
}

// todo:头部导航栏区域的样式设置
header {
    display: flex;
    align-items: center;
    height: 72px;
    width: 100%; //屏幕100%显示像素为1536px
    // background-color: lightcyan;

    // 设置logo的样式设置
    img {
        margin-right: 60px;
        height: 48px;
    }

    // 设置输入框的样式
    .search {
        box-sizing: border-box;
        position: relative;
        width: 212px;
        height: 26px;
        border-radius: 10px;
        background-color: #fff;

        input {
            box-sizing: border-box;
            width: 214px;
            height: 26px;
            padding-left: 18px;
            border-radius: 10px;
            border: solid 1px #313131;
            outline: none; //消除聚焦时触发的边框

            &::placeholder {
                font-style: italic;
            }
        }



        i {
            position: absolute;
            top: 30px;
            right: 10px;
            font-size: 16px;
            margin: -25px 2px;
        }
    }

    // 导航栏额样式设置
    ul {
        margin-left: 92px;
        margin-right: 150px;
        width: 366px;
        height: 22px;
        display: flex;
        justify-content: space-between;

        li {
            a {
                display: inline-block;
                height: 22px;
                color: #6a6a6a;
                text-decoration: none;

                &:hover {
                    font-weight: 600;
                    color: #D63D3D;
                    border-bottom: 3px solid #D63D3D;
                }
            }
        }
    }

    // 设置按钮的样式
    button {
        margin-right: 12px;
        width: 90px;
        height: 40px;
        font-size: 18px;
        color: #313131;
        border: 1.5px solid #313131;
    }
}


// todo:底部版权区域的设置
footer {
    width: 100%;
    height: 172px;
    // background-color: pink;

    // 底部版权部分的上半部分
    .footer_top {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 36px;
        // background-color: skyblue;

        ul {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            width: 668px;
            height: 25px;
            // background-color: lightgoldenrodyellow;

            li {
                height: 25px;
                padding-top: 8px;

                // 消除最右边的一个a标签的有边框
                &:last-of-type {
                    a {
                        border-right: 0px;
                    }
                }
            }

            a {
                padding: 0px 15px;
                border-right: 1px solid #999;
                display: inline-block;
                color: #949393;
                text-decoration: none;

            }
        }
    }


    // 底部版权部分的下半部分
    .footer_bottom {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 136px;
        background-color: #DFDFDF;

        p {
            color: #949393;
            font-size: 14px;
            line-height: 18px;
        }

        img {
            position: absolute;
            right: 400px;
            width: 100px;
        }
    }

}